<template>
	<view class="content" @tap.stop="$refs.uniselect.close()">
        <!-- navbar -->
        <u-navbar :fixed="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="人员管理" rightIcon="search" @rightClick="rightClick">
        </u-navbar>
        <!-- select -->
        <uni-select class="uniselect" ref="uniselect" bgColor="#fff" :selectData="selectData" @select="select"></uni-select>
        <view style="height:74rpx"></view>


        <!-- ccontent -->
        <view class="uni-area">
            <!-- 人员信息 -->
            <view class="u-m-t-30 uni-shadow u-p-l-10 u-p-t-10 uni-echarts-box">
                <qiun-title-bar title="人员信息"/>
                <view style="height:550rpx" class="u-flex u-row-center">
                    <!-- 不根据角色区分接口,故根据接口返回数量的长度区分 -->
                    <qiun-data-charts type="line" v-if="memberData.categories.length!=0" 
                        :ontouch="true" :canvas2d="true"
                        :opts="memberData.categories.length>5?memberData.opts:{}"
                        :chartData="memberData" />
                    <u-loading-icon v-else text="加载中" textSize="18"></u-loading-icon>
                </view>
            </view>

            <!-- 人员列表 -->
            <view class="u-m-t-50 u-font-32 font-bold">人员列表</view>
            <uni-item-member class="u-m-t-30" v-for="(tem,ind) in page.list" :key="ind" 
                :listItem="tem" @memberDetail="memberInfo(tem.id)">
            </uni-item-member>

            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                // 下拉选择数据
				selectData:[
                    { label: "认证状态", list: [], show: false, type: "smrz", value: '' },
                    { label: "进出状态", list: [], show: false, type: "ryzt", value: '' },
                ],
                // 下拉选择框筛选数据
                prameter:{
                    districtId: null,
                    smrz:'', // 人员是否认证【非必传】 
                    ryzt:'', // 人员状态【非必传】
                },
                // 人员信息
                memberData:{
                    categories:[], // '住建','水利','交通','农村农业','其它'
                    series:[
                        // {
                        //     "name": "实名制进场人数",
                        //     "data": [35,8,25,37,88]
                        // },
                        // {
                        //     "name": "考勤总人数",
                        //     "data": [ 70, 40, 65, 100,88]
                        // },
                    ],
                    opts:{ 
                        xAxis:{
                            itemCount: 3,
                            rotateLabel: false,
                            scrollShow:true,
                            disableGrid:true
                        },
                        yAxis: {
                            showTitle:true,
                            data: [
                                {
                                    position: 'left',
                                    title: '实名制进场人数',
                                    titleOffsetX: 45,
                                    titleOffsetY: -8,
                                }, 
                                {
                                    position: 'right',
                                    title: '考勤总人数',
                                    titleOffsetX: -30,
                                    titleOffsetY: -8,
                                }
                            ]
                        },
                        enableScroll: true, 
                    }
                },
                // 分页相关参数
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                },
                page:{
                    scrollTop: 0,   
                    status: 'loading',
                    total: 0,
                    list: [], // 列表
                },
			}
		},

        onPageScroll(e) {
            this.page.scrollTop = e.scrollTop;
        },
        onReachBottom(){
            if( this.page.list.length < this.page.total ){
                this.paging.pageNum += 1
                this.getStaffList()
            }else{
                this.page.status = 'nomore'
            }
        },

		onLoad(option) {
            this.prameter.districtId = option.districtId
            this.$tools.staffRenzhengFn(this,res=>{
                this.selectData.splice(0,1,res)
                this.prameter.smrz = res.value
                // 人员状态 
                this.$tools.staffStatusFn(this,res=>{
                    this.selectData.splice(1,1,res)
                    this.prameter.ryzt = res.value
                    // 人员信息图表
                    this.getStaffInfoEcharts()
                    // 人员列表
                    this.getStaffList()
                })
            })
		},


		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 搜索
            rightClick(){
                uni.navigateTo({ url: '/pages/common/search?type=member&assist=info' })
            },


            // 人员信息图表---不用根据角色(兵团&师级)分开调用接口,现有接口返回了不同数据
            getStaffInfoEcharts(){
                this.memberData.categories = []
                this.memberData.series = [
                    { index: 0, name: "实名制进场人数", data: [] },
                    { index: 1, name: "考勤总人数", data: [] },
                ]
                this.$request(this,this.$apis.staffInfoEcharts,this.prameter).then(res=>{
                    // console.log('人员信息图表',res)
                    res.map((v,i)=>{
                        this.memberData.categories.push(v.districtName?v.districtName:v.projectType)
                        this.memberData.series[0].data.push(v.staffs) // 实名制进场人数
                        this.memberData.series[1].data.push(v.atdStaffs) // 考勤总人数
                    })
                }).then()
            },


            // 人员列表
            getStaffList(){
                this.page.status = 'loading'
                const prameter = Object.assign(this.prameter,this.paging)
                this.$request(this,this.$apis.staffList,prameter).then(res=>{
                    // console.log('人员列表',res.data)
                    this.page.total = res.total
                    if( res.data.length != 0 ){
                        this.page.status = 'loadmore'
                        res.data.map((v,i)=>{
                            this.page.list.push(v)
                        })
                    }else{
                        this.page.status = 'nomore'
                        uni.$u.toast('暂未查询到更多人员相关数据')
                    }
                }).then()
            },
            // 查看人员信息
            memberInfo(id){
                uni.navigateTo({ url: '/pages/member-bag/detail?id='+id })
            },


            // 下拉选择
            select(e){
                this.prameter[e.type] = e.value
                this.getStaffInfoEcharts()
                this.paging.pageNum = 1
                this.page.list = []
                this.getStaffList()
                this.toTop()
            },


            // 回到顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0, duration: 300 })
            }
		}
	}
</script>

<style scoped lang="scss">
    .content{
        .uniselect{
            width: 100%;
            position: fixed !important;
            left: 0;
        }
    }
</style>
